import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
// 监视视口是否在可视区选择性发送请求
export const useObserve = (apiFn) => {
  const target = ref() // 获取dom对象
  const { stop } = useIntersectionObserver(
    target,
    // 进入可视区isIntersecting为true否则为false
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        apiFn() // 进入可视区调用接口获取数据，此方法是穿过来的
        stop() // 进入可视区后停止监控，以免接口重复调用
      }
    },
    {
      // 阈值
      threshold: 0
    }
  )

  return { target }
}
